<template>
  <div class="iframe">
    <div class="i-title">
      <h3>ref 响应式变化</h3>
    </div>
    <div class="i-tip">
      {{str}}
    </div>
    <div class="i-tip">
      响应式值：{{num}}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
let str = ref("源于 setup 执行后");
let num = ref(0);
setInterval(() => {
  num.value++;
}, 1000)
onMounted(() => {
  console.log("onMounted");
  str.value = "源于 onMounted 执行后"
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
